<#include "layout/_include/head.ftl">
<@head title="${blog_title!}"/>
<#include "layout/_include/container_head.ftl">
<#include "layout/_include/single_column_head.ftl">
<#include "layout/_include/side_nav.ftl">
<div ref="extraContainer" class="extra-container">
    <div class="pagination">
        <a id="globalBackToTop" class="pagination-action animated-visibility" href="#top"
           :class="{ invisible: scrollY == 0 }">
            <i class="material-icons pagination-action-icon">
                keyboard_arrow_up
            </i>
        </a>
        <@paginationTag method="index" page="${posts.number}" total="${posts.totalPages}" display="3">
            <div class="pagination-indicator">
                    <span style="text-align: center">
                        ${posts.number+1}<br><div
                                style="display: inline-block; transform: rotate(-28deg)">-</div><br>${posts.totalPages!}
                    </span>
            </div>

            <#if pagination.hasPrev>
                <a class="pagination-action" href="${pagination.prevPageFullPath!}">
                    <i class="material-icons pagination-action-icon">
                        chevron_left
                    </i>
                </a>
            </#if>

            <#if pagination.hasNext>
                <a class="pagination-action" href="${pagination.nextPageFullPath!}">
                    <i class="material-icons pagination-action-icon">
                        chevron_right
                    </i>
                </a>
            </#if>
        </@paginationTag>
    </div>
</div>
<div ref="streamContainer" class="stream-container">
    <div class="post-list-container post-list-container-no-background">
        <#list posts.content as post>
            <a href="${post.fullPath!}" class="a-block" style="color: #000">
                <div class="post-item-wrapper">
                    <div class="post-item post-item-no-divider">
                        <div class="post-item-info-wrapper">
                            <div class="post-item-title">
                                ${post.title!}
                            </div>
                            <div class="post-item-summary">
                                ${post.summary!}...
                            </div>
                            <div class="post-item-meta">
                                ${post.createTime?string('yyyy-MM-dd')}
                            </div>
                        </div>
                        <#if post.thumbnail?? && post.thumbnail!=''>
                            <div class="post-item-image-wrapper">
                                <div class="post-item-image" style="background-image: url('${post.thumbnail!}')"></div>
                            </div>
                        </#if>
                    </div>
                </div>
            </a>
        </#list>
        <#if posts?? && posts.totalPages gt 1>
            <@paginationTag method="index" page="${posts.number}" total="${posts.totalPages}" display="3">
                <div class="pagination index-page">
                    <#if pagination.hasPrev>
                        <a class="pagination-action" href="${pagination.prevPageFullPath!}" style="opacity: 1;">
                            <i class="material-icons pagination-action-icon">
                                chevron_left
                            </i>
                        </a>
                    </#if>
                    <div class="pagination-indicator"><span>${posts.number+1}/${posts.totalPages!}</span></div>
                    <#if pagination.hasNext>
                        <a href="${pagination.nextPageFullPath!}" class="pagination-action" style="opacity: 1;">
                            <i class="material-icons pagination-action-icon">
                                chevron_right
                            </i>
                        </a>
                    </#if>
                </div>
            </@paginationTag>
        </#if>
    </div>
    <#include "layout/_include/single_column_footer.ftl">
</div>

<#include "layout/_include/container_tail.ftl">
<#include "layout/_include/tail.ftl">